<template>
	<el-dialog v-model="dialogVisible" width="30%" align-center draggable :show-close="false">
		<template #header>
			<el-tabs v-model="activeDialogForm" stretch>
				<el-tab-pane name="login">
					<template #label>
						<h2>登录</h2>
					</template>
				</el-tab-pane>
				<el-tab-pane name="register">
					<template #label>
						<h2>注册</h2>
					</template>
				</el-tab-pane>
			</el-tabs>
		</template>
		<login-form v-show="activeDialogForm === 'login'" :callback="callback" />
		<register-form v-show="activeDialogForm === 'register'" :callback="callback" />
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'
const props = defineProps({
	callback: Function
})
const dialogVisible = ref(false)
const activeDialogForm = ref('login')
const callback = (method: string, isSuccess: boolean) => {
	if (method === 'login') {
		if (isSuccess) {
			dialogVisible.value = false
			if (props.callback) {
				props.callback()
			}
		}
	} else if (method === 'register') {
		activeDialogForm.value = 'login'
	} else {
		dialogVisible.value = false
	}
}
defineExpose({
	dialogVisible
})
</script>

<style lang="less" scoped>

</style>